<template>
  <div v-show="refresh">
    <vs-button style="margin-bottom: 16px" size="xl" @click="addmanger">
      <i class="el-icon-upload el-icon--right"></i>
      <span style="padding-left: 16px">添加管理员</span>
    </vs-button>

    <vs-table>
      <template #thead>
        <vs-tr>
          <vs-th>管理员</vs-th>
          <vs-th>注册时间</vs-th>
          <vs-th>操作</vs-th>
        </vs-tr>
      </template>
      <template #tbody>
        <vs-tr :key="tr._id" v-for="tr in mdata" :data="tr">
          <vs-td>{{ tr.username }}</vs-td>
          <vs-td>{{ tr.date }}</vs-td>
          <vs-td>
            <div style="display: flex">
              <vs-button size="xl" transparent @click="updateuserinfo">
                <i class="el-icon-edit"></i>
              </vs-button>
              <vs-button size="xl" transparent @click="delbtn(tr._id)">
                <i class="el-icon-delete"></i>
              </vs-button>
            </div>
          </vs-td>
        </vs-tr>
      </template>
    </vs-table>

    <vs-dialog v-model="visible">
       <template #header>
          <h4 class="not-margin">
              管理员
          </h4>
        </template>
      <el-form style="width:600px">
        <el-form-item label="用户名" v-show="updated">
          <el-input v-model="username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" v-show="updated">
          <el-input v-model="password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input
            v-model="nackname"
            autocomplete="off"
          ></el-input> </el-form-item
        ><el-form-item label="自我评价">
          <el-input
            v-model="evaluate"
            autocomplete="off"
          ></el-input> </el-form-item
        ><el-form-item label="毕业院校">
          <el-input
            v-model="graduate"
            autocomplete="off"
          ></el-input> </el-form-item
        ><el-form-item label="手机号">
          <el-input
            v-model="phone"
            autocomplete="off"
          ></el-input> </el-form-item
        ><el-form-item label="邮箱" @keyup.enter.native="managerAdd">
          <el-input v-model="email" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="managerAdd()">确 定</el-button>
      </div>
      <template #footer>
        <div style="display: flex; justify-content: end">
          <vs-button size="xl" @click="managerAdd()" transparent> 确 定 </vs-button>
          <vs-button size="xl" @click="visible = false" dark transparent>
            取 消
          </vs-button>
        </div>
      </template>
    </vs-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import {
  usersignupAPI,
  userlistAPI,
  userdelAPI,
  userputAPI,
} from "../../api/index"
//   let res = await registeUserAPI(this.username, this.password);
export default {
  data () {
    return {
      mdata: [],
      visible: false,
      formLabelWidth: "80px",
      username: "",
      password: "",
      newdate: "",
      nackname: "",
      evaluate: "",
      graduate: "",
      phone: "",
      email: "",
      refresh: true,
      updated: true,
      currentId: "",
    }
  },

  methods: {
    //添加管理员
    addmanger () {
      this.visible = true
      this.updated = true
    },
    //更新用户信息
    async updateuserinfo () {
      this.visible = true
      this.updated = false
      var res = await userputAPI(
        this.currentId,
        this.nackname,
        this.evaluate,
        this.graduate,
        this.phone,
        this.email
      )
      console.log("updateuserinfo")
      console.log(res)
    },
    delbtn (id) {
      this.currentId = id
      console.log(this.currentId)
      this.$confirm("此操作将永久删除该管理员, 仍然删除吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // console.log(id);
          await userdelAPI(id)
          this.$store.state.managerrefresh++
          this.$message({
            type: "success",
            message: "删除成功!",
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          })
        })
    },
    //正则表达式判断手机号或联系方式是否正确
    regexp () {
      console.log("1")
    },
    async managerAdd () {
      console.log(this.updated)
      if (this.updated) {
        this.newdate = new Date()
        if (this.username == "" || this.password == "") {
          this.$message.error("用户名或密码不为空")
        } else {
          await usersignupAPI(
            this.username,
            this.password,
            this.newdate,
            this.nackname,
            this.evaluate,
            this.graduate,
            this.phone,
            this.email
          )
          this.$store.state.managerrefresh++
          this.$message({
            message: "添加管理员成功",
            type: "success",
          })
        }
        this.visible = false
        this.$forceUpdate()
      } else {
        var res = await userputAPI(
          this.currentId,
          this.nackname,
          this.evaluate,
          this.graduate,
          this.phone,
          this.email
        )
        console.log(123)
        this.$store.state.managerrefresh++
        console.log(res)
      }
    },
  },

  async mounted () {
    let {data=[]} = await userlistAPI()
    const res = data.data.map(item=>({...item,date:dayjs(item.date).format('YYYY-MM-DD')}))
    this.mdata = res
  },
  //   var date=new Date()
};
</script>

<style lang='less' scoped>
.comment {
  color: black;
}

table td,
table th {
  border-bottom: 0.5px solid rgb(240, 240, 240);
  padding: 20px 0px;
  padding-right: 230px;
  padding-left: 20px;
  min-width: 130px;
  height: 20px;
  color: #606266;
}

table th {
  text-align: center;
  font-weight: 700;
  color: #909399;
  //   background-color: #f1f1f1;
}
table .tbody {
  &:hover {
    background-color: #f5f7fa;
  }
}
</style>